import React, { useState, useEffect } from "react";
import request from "../../utils/requests";
import {
    Button,
    Space,
    Row,
    Col,
    Image,
    Carousel,
} from "antd";
import {
    BrowserRouter as Router,
    Link,
} from "react-router-dom";

export default function Home() {
    const [homedata, setHomedata] = useState([]);
    const [classify, setClassify] = useState([]);
    useEffect(async () => {
        const data = await request("/goods", { method: "GET" });
        if (data.data.success) {
            setHomedata([...data.data.query.goods_stock]);
            console.log(data);
        }
        const classifyimg = await request("/classify/img", { method: "GET" });
        if (classifyimg.data.success) {
            setClassify([...classifyimg.data.query.result]);
        }
    }, []);
    return (
        <div>
            <main className="profile-page">
                <section className="relative block h-500-px bg">
                    <div className="absolute top-0 w-full h-full">
                        {/* 轮播图banner */}
                        <Carousel autoplay>
                            <div>
                                <img
                                    src="/public/homeimg/banner1.jpg"
                                    alt=""
                                    style={{ width: "100%" }}
                                />
                            </div>
                            <div>
                                <img
                                    src="/public/homeimg/banner2.jpg"
                                    alt=""
                                    style={{ width: "100%" }}
                                />
                            </div>
                            <div>
                                <img
                                    src="/public/homeimg/banner3.jpg"
                                    alt=""
                                    style={{ width: "100%" }}
                                />
                            </div>
                        </Carousel>
                        <div className="relative py-2 bg-blueGray-200 top-82">
                            <div className=" mx-auto px-4">
                                <div className="relative min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64">
                                    <div className="px-6">
                                        {/* 分类的图片 */}
                                        <Row justify="center" className="p-4">
                                            {classify.map((item) => {
                                                return (
                                                    <Col
                                                        style={{
                                                            display: "block",
                                                            maxWidth: "20%",
                                                            padding: "0.5rem 0",
                                                        }}
                                                        key={item.id}
                                                    >
                                                        <Link to={"/classify/" + item.id}>
                                                            <Image width="260" height="350" title={item.name} src={"avatars/" + item.picture} placeholder alt="" fallback="" />
                                                        </Link>
                                                    </Col>
                                                );
                                            })}
                                        </Row>
                                    </div>
                                    <div className="wrapper">
                                        <h2 className="my-4 flex justify-center">
                                            <img src="/public/homeimg/xinshui.jpg" alt="" />
                                        </h2>
                                        <div className="top clearfix flex justify-center flex-wrap">
                                            <Image.PreviewGroup>
                                                <Space size="large">
                                                    <Image
                                                        width={430}
                                                        src="/public/homeimg/rainbow.jpg"
                                                    />
                                                    <Image
                                                        height={244.5}
                                                        src="/public/homeimg/jianyue.jpg"
                                                    />
                                                    <Image
                                                        height={244.5}
                                                        src="/public/homeimg/yishu.jpg"
                                                    />
                                                </Space>
                                            </Image.PreviewGroup>
                                        </div>
                                        <div className="bott clearfix flex justify-center">
                                            <Image.PreviewGroup>
                                                <Space size="large">
                                                    <Image
                                                        height={244.5}
                                                        src="/public/homeimg/chuangyi.jpg"
                                                    />
                                                    <Image
                                                        height={244.5}
                                                        src="/public/homeimg/gansao.jpg"
                                                    />
                                                    <Image
                                                        width={430}
                                                        src="/public/homeimg/qingyou.jpg"
                                                    />
                                                </Space>
                                            </Image.PreviewGroup>
                                        </div>
                                        <div>
                                            <h2 className="my-4 flex justify-center">
                                                <img src="/public/homeimg/baijian.jpg" alt="" />
                                            </h2>
                                            <Row className="m-4 flex justify-center">
                                                {homedata.map((item) => {
                                                    return item.id < 204 ? (
                                                        <Col
                                                            style={{
                                                                maxWidth: "30%",
                                                                padding: "0.5rem 0",
                                                            }}
                                                            key={item.id}
                                                        >
                                                            <div
                                                                className="mx-6"
                                                            >
                                                                <Link to={"/goodsDetails/" + item.id}>
                                                                    <Image
                                                                        src={"avatars/" + item.photo1}
                                                                        alt=""
                                                                        width={250}
                                                                        height={250}
                                                                        title={item.label}
                                                                        fallback=""
                                                                    />
                                                                </Link>
                                                                <p className="my-2">{item.name}</p>
                                                                <Button className="m-auto" danger ghost>
                                                                    ￥{item.price}
                                                                </Button>
                                                            </div>
                                                        </Col>
                                                    ) : (
                                                        ""
                                                    );
                                                })}
                                            </Row>
                                        </div>
                                    </div>
                                    <h2>
                                        <img src="/public/homeimg/hh3.jpg" alt="" style={{ margin: '0 auto' }} />
                                    </h2>
                                    <div className="wrapper">
                                        <h2 className="my-4 flex justify-center">
                                            <img src="/public/homeimg/bigua.jpg" alt="" />
                                        </h2>
                                        <Row className="p-4 flex justify-center">
                                            {homedata.map((item) => {
                                                return item.id > 222 && item.id < 231 ? (
                                                    <Col
                                                        style={{
                                                            maxWidth: "25%",
                                                            padding: "0.5rem 0",
                                                        }}
                                                        key={item.id}
                                                    >
                                                        <div
                                                            className="mx-6"
                                                        >
                                                            <Link to={"/goodsDetails/" + item.id}>
                                                                <Image
                                                                    src={"avatars/" + item.photo1}
                                                                    alt=""
                                                                    width={200}
                                                                    height={200}
                                                                    title={item.label}
                                                                    fallback=""
                                                                />
                                                            </Link>
                                                            <p className="my-2">{item.name}</p>
                                                            <Button className="m-auto" danger ghost>
                                                                ￥{item.price}
                                                            </Button>
                                                        </div>
                                                    </Col>
                                                ) : (
                                                    ""
                                                );
                                            })}
                                        </Row>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    );
}
